<template>
	<view class="container">
		<view v-if="isLogin">
			
			<view  class="userinfo">
				
				<view>
					<view>{{userInfo.utell}}</view>
					<view>{{userInfo.uintegral}}</view>
					<view>{{userInfo.urole}}</view>
				</view>
				
				<image src="/static/user.png" mode=""></image>
			</view>
			
			<button @click="logout">退出登录</button>
			
			<view  class="orderlist">
				订单信息
			</view>
			
		</view>
		<view v-if="!isLogin" class="nologin">
			<!-- 用户未登录 -->
			<navigator url="/pages/login/index"><button>用户登录</button></navigator>
			<navigator url="/pages/register/index"><button>用户注册</button></navigator>

			<!-- 	
			 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {}
			}
		},
		onShow() {
			//通过本地存储获取到用户信息
			uni.getStorage({
				key: "ymsdUserInfo",
				success: (res) => {
					this.isLogin = true
					this.userInfo = res.data
				},
				fail: () => {
					this.isLogin = false
				}
			})
		},
		methods: {

			logout() {
				//用户手动确认是否需要退出登录
				uni.showModal({
					title: '提示',
					content: '您确定退出登陆吗？',
					success: function(res) {
						if (res.confirm) {
							//清除全部本地存储数据
							uni.clearStorage()
							uni.showToast({
								title: "退出成功",
								icon: "none"
							})

							//延迟3秒进行页面跳转
							//该定时器只执行一次
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 3000)
						} else if (res.cancel) {
							uni.showToast({
								title: "用户取消退出",
								icon: "none"
							})
						}
					}
				});
				//退出登录后需要进行页面 首页 或登录页

			}

		}
	}
</script>

<style>
	.userinfo {
		height: 300rpx;
		background: orange;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.userinfo image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.nologin {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;

	}

	uni-page-body,
	.container {
		width: 100%;
		height: 100%;
	}
</style>
